<script setup>
import {
  queryPageApi,
  deleteApi
} from "@/api/course";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, onMounted } from "vue";

// 查询参数
const queryParams = ref({
  name: "",
  subject: "",
  target: "",
  page: 1,
  pageSize: 10,
});

// 初始化查询
onMounted(() => {
  search();
});

// 表格数据
const courseList = ref([]);
const total = ref(0);

// 搜索
const search = async () => {
  const result = await queryPageApi(queryParams.value);
  if (result.code === 1) {
    courseList.value = result.data.rows || [];
    total.value = result.data.total || 0;
  } else {
    courseList.value = [];
    total.value = 0;
    ElMessage.error(result.msg || "数据加载失败");
  }
};

// 清空
const clear = () => {
  queryParams.value = { name: "", subject: "", target: "", page: 1, pageSize: 10 };
  search();
};

// 分页大小改变
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val;
  search();
};

// 页码改变
const handleCurrentChange = (val) => {
  queryParams.value.page = val;
  search();
};

// 新增 handleEdit 和 handleDelete 方法
const handleEdit = (row) => {
  console.log('编辑', row);
  // 这里可以添加具体的编辑逻辑
};

const handleDelete = async (id) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      '您确定要删除该课程吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    if (confirmResult === 'confirm') {
      // 调用删除接口
      const result = await deleteApi(id);
      if (result.code === 1) {
        ElMessage.success('删除成功');
        search();
      } else {
        ElMessage.error(result.msg || '删除失败');
      }
    }
  } catch (error) {
    ElMessage.info('已取消删除');
  }
};

</script>

<template>
  <div class="course-page">
    <!-- 顶部标题和操作 -->
    <div class="course-header">
      <div>
        <h2 class="course-title">
          <el-icon><Collection /></el-icon> 课程管理
        </h2>
        <div class="course-desc">
          高效管理平台课程资源，支持查询和查看详情。
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="18" class="course-stats">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card stat-blue">
          <div class="stat-icon">
            <el-icon><Collection /></el-icon>
          </div>
          <div>
            <div class="stat-value">{{ total }}</div>
            <div class="stat-label">课程总数</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card stat-green">
          <div class="stat-icon">
            <el-icon><PriceTag /></el-icon>
          </div>
          <div>
            <div class="stat-value">
              {{ courseList.filter((c) => c.subject === 1).length }}
            </div>
            <div class="stat-label">Java课程</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card stat-red">
          <div class="stat-icon">
            <el-icon><PriceTag /></el-icon>
          </div>
          <div>
            <div class="stat-value">
              {{ courseList.filter((c) => c.subject === 2).length }}
            </div>
            <div class="stat-label">前端课程</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card stat-yellow">
          <div class="stat-icon">
            <el-icon><Timer /></el-icon>
          </div>
          <div>
            <div class="stat-value">
              {{
                courseList.length > 0
                  ? courseList[0].updateTime?.slice(0, 10)
                  : "--"
              }}
            </div>
            <div class="stat-label">最近更新时间</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 卡片化表格区域 -->
    <el-card class="course-table-card">
      <template #header>
        <div class="table-header-flex">
          <div class="table-title">
            <el-icon><List /></el-icon> 课程列表
          </div>
          <el-form
            :inline="true"
            :model="queryParams"
            ref="queryForm"
            class="search-form"
          >
            <el-form-item label="课程名称">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入课程名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="课程学科">
              <el-select
                v-model="queryParams.subject"
                placeholder="请选择"
                clearable
                size="small"
                style="width: 120px"
              >
                <el-option label="Java" :value="1" />
                <el-option label="前端" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="适用人群">
              <el-select
                v-model="queryParams.target"
                placeholder="请选择"
                clearable
                size="small"
                style="width: 120px"
              >
                <el-option label="初级" :value="1" />
                <el-option label="中级" :value="2" />
                <el-option label="高级" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search" size="small"
                ><el-icon><Search /></el-icon>搜索</el-button
              >
              <el-button @click="clear" size="small"
                ><el-icon><Refresh /></el-icon>清空</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </template>
      <el-table :data="courseList" border stripe class="course-table" size="small">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="课程名称" min-width="160" align="center">
            <template #default="scope">
                <el-icon class="course-table-icon"><Collection /></el-icon>
                <span class="course-name">{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="subject" label="学科" min-width="90" align="center">
            <template #default="scope">
                <el-tag :type="scope.row.subject === 1 ? 'primary' : 'success'" size="small">
                    <el-icon style="vertical-align: middle"><PriceTag /></el-icon>
                    {{ scope.row.subject === 1 ? "Java" : scope.row.subject === 2 ? "前端" : "未知" }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="target" label="适用人群" min-width="90" align="center">
            <template #default="scope">
                <el-tag :type="scope.row.target === 1 ? 'primary' : scope.row.target === 2 ? 'success' : 'warning'" size="small">
                    {{ scope.row.target === 1 ? "初级" : scope.row.target === 2 ? "中级" : scope.row.target === 3 ? "高级" : "未知" }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="price" label="价格(¥)" min-width="100" align="center">
            <template #default="scope">
                <span class="course-price">{{ scope.row.price }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后修改时间" min-width="140" align="center" />
        <el-table-column label="操作" align="center" min-width="120">
            <template #default="scope">
                <el-button type="primary" link @click="handleEdit(scope.row)">
                    <el-icon><Edit /></el-icon>编辑
                </el-button>
                <el-button type="danger" link @click="handleDelete(scope.row.id)">
                    <el-icon><Delete /></el-icon>删除
                </el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          small
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.course-page {
  padding: 18px 10px 30px 10px;
  background: #f5f7fa;
  min-height: 100vh;
}
.course-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.course-title {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(90deg, #409eff, #64b5f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.course-desc {
  color: #909399;
  font-size: 15px;
  margin-bottom: 2px;
}

.course-stats {
  margin-bottom: 18px;
}
.stat-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e6f7ff33;
  padding: 18px 16px;
  margin-bottom: 10px;
  min-height: 80px;
  gap: 16px;
}
.stat-icon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 8px;
}
.stat-blue {
  background: linear-gradient(90deg, #e6f7ff, #f0faff);
  color: #1890ff;
}
.stat-green {
  background: linear-gradient(90deg, #e6ffed, #f6fffa);
  color: #52c41a;
}
.stat-red {
  background: linear-gradient(90deg, #fff1f0, #fff7f6);
  color: #ff4d4f;
}
.stat-yellow {
  background: linear-gradient(90deg, #fffbe6, #fffef6);
  color: #faad14;
}
.stat-value {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}
.stat-label {
  color: #909399;
  font-size: 14px;
}

.course-table-card {
  margin-top: 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e6f7ff33;
  background: #fff;
}
.table-header-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.course-table {
  border-radius: 8px;
  overflow: hidden;
  font-size: 15px;
  background: #fff;
}
.course-table-icon {
  color: #409eff;
  margin-right: 6px;
  font-size: 18px;
}
.course-name {
  font-weight: 500;
  color: #333;
}
.course-price {
  font-weight: bold;
  color: #ff4da6;
}
.pagination {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .course-header,
  .table-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .stat-card {
    margin-bottom: 10px;
  }
}
</style>